@normalColor: #d9d9d9;
@activeColor: #00c9b7;
@animationTime: 0.2s;
@disableBorderColor: #f5f5f5;
@disableBgColor: #b8b8b8;
.containerDisabled {
  @apply cursor-not-allowed;
  color: #999;
  .checkbox {
    @apply cursor-not-allowed;
    background-color: @disableBorderColor !important;
    border-color: @normalColor !important;
    &::after {
      border-color: @disableBgColor !important;
    }
  }
}

.checkbox_container {
  @apply inline-flex items-center cursor-pointer text-base text-main h-fit shrink-0;
  .checkbox {
    @apply relative  inline-block h-4 w-4 rounded-sm border border-solid bg-transparent;
    border-color: @normalColor;
    background-color: #f7ece5;
    &.active {
      transform-origin: bottom left;
      &::after {
        @apply absolute w-1 h-2 border-solid;
        left: 5px;
        content: '';
        top: 2px;
        border-color: white;
        border-width: 0 2px 2px 0;
        transform: scale(0) rotate(45deg);
        animation: ripple @animationTime ease forwards;
      }
      @keyframes ripple {
        0% {
          transform: scale(0) rotate(45deg);
        }
        25% {
          transform: scale(0.25) rotate(45deg);
        }
        50% {
          transform: scale(0.5) rotate(45deg);
        }
        75% {
          transform: scale(0.75) rotate(45deg);
        }
        100% {
          transform: scale(1) rotate(45deg);
        }
      }
    }
  }
  .checkboxLabel {
    @apply text-sm text-main-aa;
    line-height: 14px;
    margin-top: -1px;
  }
}
